<script lang="ts" setup>
import { safeBottom } from '@/libs/config'
import { imagePath } from '@/libs/file-utils'

defineProps<{
  /** 是否显示 */
  show: boolean
  /** 标题 */
  title?: string
}>()

const emit = defineEmits(['update:show'])

const icon_close = imagePath('icon-close.svg')
</script>

<template>
  <MaskWrapper
    :show="show"
    @update:show="$emit('update:show', $event)"
  >
    <div
      class="half-window"
      :class="{ show }"
      @click.stop=""
    >
      <div
        class="close"
        @click="$emit('update:show', false)"
      ></div>
      <div class="title">{{ title }}</div>
      <div class="divider"></div>

      <slot></slot>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.half-window {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);

  width: 100%;
  padding-bottom: v-bind(safeBottom);

  background-color: #2F2F2F;
  border-radius: 36rpx 36rpx 0 0;

  transition: transform .3s;

  &.show {
    transform: translateY(0%);
  }

  .close {
    position: absolute;
    top: 14rpx;
    right: 22rpx;
    width: 48rpx;
    height: 48rpx;

    background-image: v-bind(icon_close);
    background-size: 28rpx 28rpx;
    background-repeat: no-repeat;
    background-position: center;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    line-height: 76rpx;
    letter-spacing: 1rpx;
  }

  .divider {
    width: 100%;
    height: 2rpx;
    background-color: rgba(#fff, .2);
  }
}
</style>
